import React, {useState, useRef} from 'react';
import {
  Text,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet,
  PixelRatio,
  Dimensions,
} from 'react-native';
import {isIos} from '@/constants';

const SW = Dimensions.get('window').width;

function getRealDP(designPx) {
  return PixelRatio.roundToNearestPixel(designPx / 3);
}

// 验证码输入组件样式
const styles = StyleSheet.create({
  // textInput样式
  textInput: {
    height: isIos ? 0 : getRealDP(1),
    width: SW,
    position: 'absolute',
    bottom: 0,
    left: 0,
  },
  // 验证码输入框总容器
  verifyContainer: {
    //width: SW,
    height: getRealDP(150),
  },
  // 验证码带下划线输入格
  textInputItem: {
    //width: getRealDP(120),
    flex: 1,
    borderBottomWidth: getRealDP(1),
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomColor: '#888888',
    marginHorizontal: getRealDP(10),
    backgroundColor: '#fff',
  },
  textInputItemIn: {
    //width: getRealDP(120),
    flex: 1,
    borderBottomWidth: getRealDP(1),
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomColor: '#282828',
    marginHorizontal: getRealDP(10),
    backgroundColor: '#fff',
  },
  // 输入验证码样式
  verifyText: {
    fontSize: getRealDP(72),
    color: '#282828',
  },
  // 验证码文本框容器
  verifyTextContainer: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    width: SW,
    height: getRealDP(150),
    paddingHorizontal: getRealDP(74),
    position: 'absolute',
    left: 0,
    top: 0,
  },
});

// 验证码组件
function CodeVerifyInput({verifyCodeLength = 4, onChange}) {
  const [verifyCode, setVerifyCode] = useState('');
  const textInput = useRef();

  const handleTouchInput = () => {
    if (textInput.current) {
      const isFocused = textInput.current.isFocused();
      if (!isFocused) {
        textInput.current.focus();
      }
    }
  };

  const renderVerifyCode = (code) => {
    const padValueArr = [];
    for (let i = 0; i < verifyCodeLength; i += 1) {
      padValueArr.push(code[i] || '');
    }
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={handleTouchInput}
        style={styles.verifyTextContainer}>
        {padValueArr.map((digit, index) => (
          <View
            key={index}
            style={
              digit === ' ' ? styles.textInputItem : styles.textInputItemIn
            }>
            <Text style={styles.verifyText}>{digit}</Text>
          </View>
        ))}
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.verifyContainer}>
      {renderVerifyCode(verifyCode)}
      <TextInput
        ref={textInput}
        underlineColorAndroid="transparent"
        caretHidden
        style={styles.textInput}
        autoFocus
        keyboardType="numeric"
        maxLength={verifyCodeLength}
        onChangeText={(text) => {
          const reg = /^[0-9]*$/;
          if (reg.test(text)) {
            setVerifyCode(text);
            if (text.length === verifyCodeLength) {
              onChange(text);
            }
          }
        }}
        value={verifyCode}
      />
    </View>
  );
}

export default CodeVerifyInput;
